<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <ul>
    <li>
      <div class="title">
        <div>
          <i class="iconfont icon-weixin"></i> 微信
        </div>
        <div class="time">30分钟前</div>
      </div>
      <h4>阿伟</h4>
      <div>我die了</div>
    </li>
    <li>
      <div class="title">
        <div>
          <i class="iconfont icon-weixin"></i> 微信
        </div>
        <div class="time">50分钟前</div>
      </div>
      <h4>阿强</h4>
      <div>兄弟谢谢你，记得来喝喜酒</div>
    </li>
    <li>
      <div class="title">
        <div>
          <i class="iconfont icon-weixin"></i> 微信
        </div>
        <div class="time">1小时前</div>
      </div>
      <h4>阿珍</h4>
      <div>鹏哥对不起，我爱上了阿强</div>
    </li>
    <li>
      <div class="title">
        <div>
          <i class="iconfont icon-weixin"></i> 微信
        </div>
        <div class="time">2小时前</div>
      </div>
      <h4>财神爷</h4>
      <div>工资+10086</div>
    </li>
  </ul>

  <script>
    const ul = document.querySelector("ul")
    ul.addEventListener('click',()=>{
      ul.classList.toggle('active')
    })
  </script>
</body>

</html>